<template>
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item label="活动标题" prop="title" >
        <a-input v-model="form.title" placeholder="请输入活动标题" />
      </a-form-model-item>
      <a-form-model-item label="活动简介" prop="content" >
        <a-input v-model="form.content" placeholder="请输入内容" type="textarea" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="活动详情" prop="details" >
        <editor v-model="form.details" />
      </a-form-model-item>
      <a-form-model-item label="活动类型" prop="type" >
        <a-select placeholder="请选择活动类型" v-model="form.type">
          <a-select-option v-for="(d, index) in typeOptions" :key="index" :value="d.value" >{{ d.label }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="活动封面" prop="imageUrl" >
        <span slot="label">
          活动封面&nbsp;
          <a-tooltip title="建议尺寸：宽高比（9：16）竖版，内容居中">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <file-upload v-model="form.imageUrl" type="image"></file-upload>
      </a-form-model-item>
      <a-form-model-item prop="shareNum" >
        <span slot="label">
          分享次数&nbsp;
          <a-tooltip title="系统自动累计，可以自行设置初始量">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.shareNum" placeholder="请输入分享次数" />
      </a-form-model-item>
      <a-form-model-item prop="signNum" >
        <span slot="label">
        报名人数&nbsp;
          <a-tooltip title="系统自动累计，可以自行设置初始量">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.signNum" placeholder="请输入报名人数" />
      </a-form-model-item>
      <a-form-model-item prop="grantNum" >
        <span slot="label">
        发放人数&nbsp;
          <a-tooltip title="系统自动累计，可以自行设置初始量">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.grantNum" placeholder="请输入发放人数/通过人数" />
      </a-form-model-item>
      <a-form-model-item prop="limitNum" >
        <span slot="label">
        限制人数&nbsp;
          <a-tooltip title="限制活动的最大报名数，0为不限制">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.limitNum" placeholder="请输入限制人数" />
      </a-form-model-item>
      <a-form-model-item prop="limitAgeMin" >
        <span slot="label">
        限制最小年龄&nbsp;
          <a-tooltip title="限制活动的限制最小年龄，0为不限制">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.limitAgeMin" type="number" placeholder="请输入限制最小年龄" />
      </a-form-model-item>
      <a-form-model-item prop="limitAgeMax" >
        <span slot="label">
        限制最大年龄&nbsp;
          <a-tooltip title="限制活动的限制最大年龄，0为不限制">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.limitAgeMax" placeholder="请输入限制最大年龄" />
      </a-form-model-item>
      <a-form-model-item label="开始时间" prop="startTime" >
        <a-date-picker style="width: 100%" v-model="form.startTime" valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="结束时间" prop="endTime" >
        <a-date-picker style="width: 100%" v-model="form.endTime" valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="状态" prop="status" >
        <a-select placeholder="请选择状态" v-model="form.status">
          <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.value" >{{ d.label }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="submitForm">
            保存
          </a-button>
          <a-button type="dashed" @click="cancel">
            取消
          </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
  import { getActivity, addActivity, updateActivity } from '@/api/system/activity'
      import Editor from '@/components/Editor'

  export default {
    name: 'CreateForm',
    props: {
        typeOptions: {
            type: Array,
            required: true
          },
        statusOptions: {
            type: Array,
            required: true
          }
    },
    components: {
      Editor
    },
    data () {
      return {
        submitLoading: false,
        formTitle: '',
        // 表单参数
        form: {
            id: undefined,
            title: undefined,
            content: undefined,
            details: undefined,
            type: undefined,
            imageUrl: undefined,
            shareNum: 0,
            signNum: 0,
            grantNum: 0,
            limitNum: 0,
            limitAgeMin: 0,
            limitAgeMax: 0,
            status: '0',
            delFlag: undefined,
            createBy: undefined,
            createTime: undefined,
            updateBy: undefined,
            updateTime: undefined
        },
        // 1增加,2修改
        formType: 1,
        open: false,
        rules: {
          title: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入活动简介', trigger: 'blur' }
          ],
          details: [
            { required: true, message: '请输入活动详情', trigger: 'blur' }
          ],
          type:[
            { required: true, message: '请选择活动类型', trigger: 'change' }
          ],
          imageUrl: [
            { required: true, message: '请上传活动图片', trigger: 'change' }
          ],
          endTime: [
            { required: true, message: '请选择开始时间', trigger: 'change' }
          ],
          startTime: [
            { required: true, message: '请选择活动开始时间', trigger: 'change' }
          ],
          status:[
            { required: true, message: '请选择活动状态', trigger: 'change' }
          ],
        }
      }
    },
    filters: {
    },
    created () {
    },
    computed: {
    },
    watch: {
    },
    mounted () {
    },
    methods: {
      onClose () {
        this.open = false
      },
      // 取消按钮
      cancel () {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset () {
        this.formType = 1
        this.form = {
            id: undefined,
            title: undefined,
            content: undefined,
            details: undefined,
            type: undefined,
            imageUrl: undefined,
            shareNum: 0,
            signNum: 0,
            grantNum: 0,
            limitNum: 0,
            limitAgeMin: 50,
            limitAgeMax: 0,
            status: '0',
            delFlag: undefined,
            createBy: undefined,
            createTime: undefined,
            updateBy: undefined,
            updateTime: undefined
        }
      },
      /** 新增按钮操作 */
      handleAdd (row) {
        this.reset()
        this.formType = 1
        this.open = true
        this.formTitle = '添加'
      },
      /** 修改按钮操作 */
      handleUpdate (row, ids) {
        this.reset()
        this.formType = 2
        const id = row ? row.id : ids
        getActivity(id).then(response => {
          this.form = response.data
          this.open = true
          this.formTitle = '修改'
        })
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.submitLoading = true
            if (this.form.id !== undefined && this.form.id !== null) {
              updateActivity(this.form).then(response => {
                this.$message.success('修改成功',3)
                this.open = false
                this.$emit('ok')
              }).finally(() => {
                this.submitLoading = false
              })
            } else {
              addActivity(this.form).then(response => {
                this.$message.success('新增成功',3)
                this.open = false
                this.$emit('ok')
              }).finally(() => {
                this.submitLoading = false
              })
            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>
